<template>
	<view>
		<uni-nav-bar left-icon="back" @clickLeft="$tab.back()" color="#FFF" backgroundColor="transparent"
			:border="false" :statusBar="true" :fixed="true"></uni-nav-bar>
		<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/red_end_nav.png" class="navImg" mode=""></image>

		<view class="" style="height: 240rpx;">

		</view>

		<view class="py-48 flex flex-col items-center" v-if="redPacketInfo">
			<view class="flex items-center">
				<image :src="redPacketInfo.sendUserInfo.avatar" class="image-64 round" mode=""></image>
				<view class="text-36 font-700 ml-20">
					{{redPacketInfo.sendUserInfo.nickName}}发来的红包
				</view>
			</view>
			<view class="text-9E9E9E mt-20" v-if="detail.data">
				{{redPacketInfo.remark}}
			</view>

			<view class="text-9E9E9E mt-20" v-else>
				{{ redPacketInfo.state == 2 ? '红包已过期' : '红包已抢完' }}
			</view>

			<view class="font-700" style="font-size: 120rpx;color: #FF4037;margin-top: 96rpx;" v-if="detail.data">
				{{detail.data.price}}
			</view>
			<view class="" style="color: #FF4037;" v-if="detail.data">
				已存入{{redPacketInfo.moneyName}}
			</view>
		</view>


		<view class="" style="height: 16rpx;background-color: #F8f8f8;">

		</view>

		<view class="px-20 py-32" v-if="detail">
			<view class="text-9E9E9E mb-32">
				已领取 {{ detail.receiveNum }}
			</view>

			<view class="" v-for="(item,index) in detail.receiveRecordList" :key="index">
				<view class="flex items-center justify-between">
					<view class="flex items-center">
						<image :src="item.sendUserInfo.avatar" mode="" class="image-80 round"></image>
						<view class="ml-20">
							<view class="text-32">
								{{item.sendUserInfo.nickName}}
							</view>
							<view class="text-gray mt-12">
								{{item.receiveTime}}
							</view>
						</view>
					</view>
					<view class="text-32 font-500">
						{{item.price}}
					</view>
				</view>
				<u-divider></u-divider>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: null,
				redPacketInfo: null,
			};
		},
		async onLoad(e) {
			const res = await this.$Api.chat.robredpacket({
				redPacketId: e.id
			})
			this.detail = res
			this.redPacketInfo = res.redPacketInfo
		},
		
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF !important;
	}

	.uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 99;
	}

	.navImg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
		height: 240rpx;
	}
</style>